// snake
class Snake {
    // 表示蛇头的元素
    head: HTMLElement;
    // 蛇的身体（包括蛇头）
    bodies: HTMLCollection;
    // 获取蛇的容器
    element: HTMLElement;

    constructor() {
        this.element = document.getElementById('snake')!
        this.head = document.querySelector('#snake > div') as HTMLElement;
        this.bodies = this.element.getElementsByTagName('div');
    }

   get X() {
        
       return this.head.offsetLeft
   }

   get Y() {
       return this.head.offsetTop
   }

   set X(value: number) {
    // 每次只移动一个方向
        if(this.X === value) {
            return
        }
        if(value <0 || value > 290) {
            throw new Error('蛇撞墙了')
        }
        // 水平移动时 不能是反方向
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft ===value) {
            // 当蛇向右时  x 值增大
            if(value > this.X) {
                // 向右是转头了 阻止它调转方向 正常是 + 那么就改为减
                value = this.X - 10
            } else {
                value = this.X + 10
            }
        }
        this.moveBody()
       this.head.style.left = value+"px"
       
   }
   set Y(value: number) {
    if(this.Y === value) {
        return
    }
    if(value <0 || value > 290) {
        throw new Error('蛇撞墙了')
    }
	if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value) {
		if(value > this.Y) {
			// 同 value 值增大是转为 下 阻止转 下 改为减
			value = this.Y - 10
		} else {
			value = this.Y + 10
		}
	}
       this.head.style.top = value + "px"
       this.moveBody()
   }
//    添加身体
   addBody() {
    this.element.insertAdjacentHTML("beforeend", "<div></div>");
   }
//    移动身体
   moveBody() {
    for(let i = this.bodies.length - 1; i> 0; i--) {
        // 获取前一个身体的位置
        let x = (this.bodies[i - 1] as HTMLElement).offsetLeft;
        let y = (this.bodies[i - 1] as HTMLElement).offsetTop;

        (this.bodies[i] as HTMLElement).style.left = x +"px";
        (this.bodies[i] as HTMLElement).style.top = y + "px";
    }
   }
   // 检查蛇头是否撞到身体
   checkHeadTBody() {
	   for(let i = 1; i< this.bodies.length; i++) {
		   let body = this.bodies[i] as HTMLElement;
		   // 位置重合就是撞到自己了 抛出异常 结束游戏
		   if(this.X === body.offsetLeft && this.Y === body.offsetTop) {
			   throw new Error("撞到自己了！")
		   }
	   }
   }
}

export default Snake